import { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css';

class App extends Component {

  // 状态在哪里，操作状态的方法就在哪里
  state = {
    todos: [
      {
        id: '001', name: '吃饭', done: true
      },
      {
        id: '002', name: '睡觉', done: true
      },
      {
        id: '003', name: '打代码', done: false
      }
    ]
  }

  // 添加 todo
  addTodo = (todoObj) => {
    // 添加 todo
    const { todos } = this.state
    const newTodos = [todoObj, ...todos]
    this.setState({
      todos: newTodos
    })
  }

  // 更新 todo
  updateTodo = (id, done) => {
    const { todos } = this.state
    const newTodos = todos.map(todo => {
      if (todo.id === id) {
        return { ...todo, done }
      }
      return todo
    })
    this.setState({
      todos: newTodos
    })
  }

  // 删除 todo
  deleteTodo = (id) => {
    const { todos } = this.state
    const newTodos = todos.filter(todo => todo.id !== id)
    this.setState({
      todos: newTodos
    })
  }

  // 全选
  checkAll = (done) => {
    console.log('checkAll')
    const { todos } = this.state
    const newTodos = todos.map(todo => ({...todo, done}))
    this.setState({
      todos: newTodos
    })
  }

  // 清除所有已完成的
  clearDone = () => {
    const { todos } = this.state
    const newTodos = todos.filter(todo => !todo.done)
    this.setState({
      todos: newTodos
    })
  }

  render() {
    const { todos } = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
          <Footer todos={todos} checkAll={this.checkAll} clearDone={this.clearDone} />
        </div>
      </div>
    );
  }
}

export default App;
